@mixin bgStyle {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    place-items: center;
}

.loginstyle-container{
    width: 100%;
    height: 100%; 
    @include bgStyle();
    display: grid; 
    .content{
        width: 758px;
        height: 420px;
        background-color: #e9e9e9;
        border-radius: .7rem;
        box-shadow: 0 0.9rem 1.7rem rgb(0 0 0 / 25%), 0 0.7rem 0.7rem rgb(0 0 0 / 22%);
        position: relative;
        overflow: hidden;
        .overlay_content{
            height: 100%;
            left: 50%;
            overflow: hidden;
            position: absolute;
            top: 0;
            transition: transform 0.6s ease-in-out;
            width: 50%;
            z-index: 1; 
            .overlay{
                position: relative;
                height: 100%;
                left: -100%; 
                transition: transform 0.6s ease-in-out;
                width: 200%;
                @include bgStyle();
                display: flex; 
                .kuai{  
                    transition: transform 0.6s ease-in-out;
                    &.left{
                        transform: translateX(-20%);
                    }
                    &.right{
                        transform: translateX(0%);
                    }
                }
            }
            &.right{
                transform: translateX(-100%);
                .overlay{
                    transform: translateX(50%);
                    .kuai{
                        &.left{
                            transform: translateX(0%);
                        }
                        &.right{
                            transform: translateX(20%);
                        } 
                    }
                }
            }
        }
        .form_content{
            height: 100%;
            display: flex;
            .kuai{
                width: 80%; 
            }  
        }
        .kuai{
            height: 100%;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            .btn{
                background-color: #0367a6;
                background-image: linear-gradient(90deg, #0367a6 0%, #008997 74%);
                border-radius: 20px;
                border: 1px solid #0367a6;
                color: #e9e9e9;
                cursor: pointer;
                font-size: 0.8rem;
                font-weight: bold;
                letter-spacing: 0.1rem;
                padding: 0.9rem 4rem;
                text-transform: uppercase;
                transition: transform 80ms ease-in; 
                line-height: 1.15;
                margin: 0;
            }
        }
    }
}